<template>
	<div>
		<template v-for="n in 5" :key="n">
			<span :class="{act: n <= star}" v-if="readonly">★</span>
			<span :class="{act: n <= star}" v-else  @mouseover="star = n" @click="star = n">★</span>
		</template>
	 
	</div>
</template>

<script setup>
	
import {ref, watch} from 'vue'	
	
const props = defineProps({
	modelValue: {
		required: false,
		type: Number,
    default: 0,
	},
	readonly: {
		required: false, 
		type: Boolean ,
		default: false,
	}
})


const emits = defineEmits(["update:model-value"])

//console.log(props);
// 定义响应式数据 star , 默认值为 modelValue 
const star = ref(props.modelValue) ;

// 监控 star 值的改变，并传递给 父组件
watch(star, (newVal)=> emits("update:model-value", newVal))

</script>

<style>
</style>